import Item from "antd-mobile/lib/popover/Item";
import { $browseList } from "api";
import React, { Component } from "react";
import "./zuji.less";
import SubList from "./zuji/SubList";

class Zuji extends Component {
  constructor(props) {
    super(props);
    this.state = { list: [], dateList: [] };
  }

  componentDidMount() {
    this.getList();
  }

  getList() {
    $browseList().then((res) => {
      let list = res.result;
      // 按日期分组
      // 1.将日期提取出来
      let dateList = list.map((item) => item.updateTime);
      // 2. 去重
      let set = new Set(dateList);
      dateList = [...set];

      this.setState({
        dateList,
        list: list,
      }); 

    });
  }

  render() {
    return (
      <ul className="list my-zuji">
        {this.state.dateList.map((date) => {
          // 过滤每个日期对应的列表
          let subList = this.state.list.filter(
            (item) => item.updateTime === date
          );
          return (
            <li>
              <div className="title flex jc-sb pl-15 pr-15 aic">
                <span>{date}</span>
                <span className="base">清除</span>
              </div>

              {/* 每个日期对应的列表 */}
              <SubList subList={subList} />
            </li>
          );
        })}
      </ul>
    );
  }
}

export default Zuji;
